<template>
    <div class="layout layout-side-box">
        <el-menu default-active="/home" class="el-menu-vertical" text-color="#8492a6" active-text-color="#fff"
          @open="handleOpen" @close="handleClose" :collapse="isCollapse" :unique-opened="true"  @select="navigator">
          <el-menu-item index="/home">
            <i class="iconfont icon-home"></i>
            <span slot="title">HOME</span>
          </el-menu-item>
          <el-menu-item index="/articles">
            <i class="iconfont icon-article"></i>
            <span slot="title">文章</span>
          </el-menu-item>
          <el-menu-item index="/courses">
            <i class="iconfont icon-course"></i>
            <span slot="title">课程</span>
          </el-menu-item>
          <el-menu-item index="/tutorials">
            <i class="iconfont icon-class"></i>
            <span slot="title">教程</span>
          </el-menu-item>
          <el-menu-item index="/cases">
            <i class="iconfont icon-case"></i>
            <span slot="title">案例</span>
          </el-menu-item>
          <el-menu-item index="/softwares">
            <i class="iconfont icon-software"></i>
            <span slot="title">软件</span>
          </el-menu-item>
          <el-menu-item index="/books">
            <i class="iconfont icon-book"></i>
            <span slot="title">书籍</span>
          </el-menu-item>
          <el-submenu index="/channel">
            <template slot="title">
              <i class="iconfont icon-channel"></i>
              <span slot="title">频道</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="1-1">选项1</el-menu-item>
              <el-menu-item index="1-2">选项2</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
    </div>
</template>
<style>

</style>

<script>
export default {
  props:['isCollapse'],
  data() {
    return {

    };
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },

    navigator(index,indexPath){
       this.$router.push(index)
    }
  }
};
</script>

